<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  To change this template use File | Settings | File Templates.
--%>
<html>
<head>
    <title>ajax_learning</title>
    <script type="text/javascript">
        function createXMLHttpRequest(){//  创建异步对象
            try {
                return new XMLHttpRequest();
            }catch (e) {
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP");
                }catch (e) {
                    try {
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    }catch (e) {
                        alert("error!!!!!!!!!!!!!!");
                    }
                }
            }
        }
        window.onload = function () {
            // province then city;
            var xmlHttp = createXMLHttpRequest();
            xmlHttp.open("get","<c:url value="/proviceServlet"/>",true);
            xmlHttp.send(null);// 无请求体；
            xmlHttp.onreadystatechange = function () {
                if(xmlHttp.readyState===4 && xmlHttp.status===200){
                    var text = xmlHttp.responseText;//
                    var pro_arr = text.split(",");
                    for(var i=0;i<pro_arr.length;i++){
                        var op = document.createElement("option");
                        op.value = pro_arr[i];
                        op.appendChild(document.createTextNode(pro_arr[i]));
                        //
                        document.getElementById("pro").appendChild(op);
                    }
                }
            };
            var proSelect = document.getElementById("pro");
            console.log(proSelect);
            proSelect.onchange = function () {
                // province then city;
                var xmlHttp = createXMLHttpRequest();
                xmlHttp.open("post","<c:url value="/cityServlet"/>",true);
                xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xmlHttp.send("province=" + proSelect.value);
                xmlHttp.onreadystatechange = function () {
                    if(xmlHttp.readyState===4 && xmlHttp.status===200){
                        var citylst = document.getElementById("ct");
                        var options = citylst.getElementsByTagName("option");
                        while(options.length>1){
                            citylst.removeChild(options[1]);
                        }// end the while-> deleting the child node;
                        //
                        var doc = xmlHttp.responseXML;//
                        console.log(doc);
                        var city_elems = doc.getElementsByTagName("city");
                        console.log(city_elems);
                        for(var i=0;i<city_elems.length;i++){
                            var city_elem = city_elems[i];
                            var cityName;
                            if(window.addEventListener){
                                cityName = city_elem.textContent;// fireBox
                            }else{
                                cityName = city_elem.text;// IE and others;
                            }//
                            var op = document.createElement("option");
                            op.value = cityName;
                            op.appendChild(document.createTextNode(cityName));//
                            document.getElementById("ct").appendChild(op);//
                        }
                    }
                }
            }
        };
    </script>
</head>
<body>
    <h1>省市联动</h1>
    <hr/>
    <select name="province" id="pro">
        <option>===the province===</option>
    </select>
    <select name="city" id="ct">
        <option>===the city===</option>
    </select>
    
</body>
</html>
